<template>
  <div class="w-[100%]">
    <a-date-picker
      allow-clear
      class="w-[100%]"
      :disabled="disabled"
      v-model:value="date"
      :name="name"
      @change="onChange"
      :value-format="dateFormat"
    ></a-date-picker>
  </div>
</template>

<script setup lang="ts">
import { type Dayjs } from 'dayjs';
import dayjs from 'dayjs';
/* 传递属性 */
interface Props {
  modelValue?: string;
  disabled?: boolean;
  /* 表单属性 */
  name?: string;
  /* 显示时间 */
  showTime?: boolean;
  /* 禁用的日期 */
  disabledDate?: (currentDate: Dayjs) => boolean;
  /* 自定义格式化日期 */
  dateFormat?: string;
}
/* 当前绑定日期 */
const date = ref<Dayjs>();
const emit = defineEmits(['update:modelValue']);
const props = withDefaults(defineProps<Props>(), {
  dateFormat: 'YYYY-MM-DD',
});
const onChange = () => {
  emit('update:modelValue', date.value);
};
watch(
  props,
  () => {
    if (props.modelValue) {
      date.value = dayjs(props.modelValue, props.dateFormat);
    }
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped></style>
